import React, { useEffect, useState } from 'react';
import { useRequest } from 'ahooks';
import { SideBar } from 'antd-mobile';
import './index.css';
import FundCard from '../FundCard';
import { FundsObj } from '../../type';
const Group = ({ fundsInfoArr }: { fundsInfoArr: FundsObj[] }) => {
  const [activeItem, setActiveItem] = useState<FundsObj>(fundsInfoArr[0]);

  return (
    <div className={'Group-container'}>
      <div className={'Group-side'}>
        <SideBar
          activeKey={activeItem.code}
          onChange={(key) => {
            const target = fundsInfoArr.find((item) => item.code === key) ?? fundsInfoArr[0];
            setActiveItem(target);
          }}
        >
          {fundsInfoArr.map((item) => (
            <SideBar.Item key={item.code} title={<div>{item.code + item.name}</div>} />
          ))}
        </SideBar>
      </div>
      <div className={'Group-main'}>
        <FundCard fundInfo={activeItem} />
      </div>
    </div>
  );
};
export default Group;
